<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />

	</head>

	<body>

		<div class="mui-content">
			<img id="imgUrl" src="img/detail_img.png" style="width: 100%;" />
			<div class="mui-row hmx-test-xs hmx-color-white" style="margin-top: -30px;">
				<div class="mui-col-xs-5">
					<span id="specialName" class="mui-tab-label hmx-text-md">-</span>
				</div>
				<div class="mui-col-xs-2 mui-text-right">
					<span class="icon-play"></span>
					<span id="playCount" class="mui-tab-label">-</span>
				</div>
				<div class="mui-col-xs-3 mui-text-center">
					<span class="icon-time"></span>
					<span id="upTime" class="mui-tab-label">-</span>
				</div>
				<div class="mui-col-xs-2">
					<span class="icon-rss"></span>
					<span id="subscriptionCount" class="mui-tab-label">-</span>
				</div>
			</div>

			<div class="mui-card-content index-list" style="margin-top: 8px;padding-bottom: 8px;">
				<div class="mui-row">
					<span class="hmx-text-with-bottom">
						专辑介绍
					</span>
				</div>
				<div class="mui-row">
					<span id="specialDesc" class="hmx-test-xs">
						-
					</span>
				</div>
			</div>
			<!--<div class="mui-card-content index-list" style="margin-top: 8px;padding-bottom: 8px;">
				<div class="mui-row">
					<span class="hmx-text-with-bottom">
						主播
					</span>
				</div>
				<div class="mui-row">
					<span class="hmx-test-xs">
						主播……
					</span>
				</div>
			</div>
			<div class="mui-card-content index-list" style="margin-top: 8px;padding-bottom: 8px;">
				<div class="mui-row">
					<span class="hmx-text-with-bottom">
						适合谁听
					</span>
				</div>
				<div class="mui-row">
					<span class="hmx-test-xs">
						适合谁听……
					</span>
				</div>
			</div>-->
			<div class="mui-card-content index-list" style="margin-top: 8px;padding-bottom: 8px;">
				<div class="mui-row">
					<span class="hmx-text-with-bottom">
						专辑
					</span>
				</div>

				<div id="audiosList" style="margin-top: 8px;padding-bottom: 40px;">

				</div>

			</div>
		</div>

		<nav class="mui-bar mui-bar-tab" style="line-height: 50px;">
			<div class="mui-row">
				<div class="mui-col-xs-5 mui-text-center hmx-text-md hmx-text-orange">
					<span>￥</span>
					<span id="unitPrice">0.00</span>
					<span>元</span>
				</div>
				<div id="btnEnter" class="mui-col-xs-7 mui-text-center hmx-text-md" style="background-color: #EB6100;color: white;letter-spacing: 8px;">
					<span>购买</span>
				</div>
			</div>

			<div class="mui-row">
				<div id="btnPlay" class="mui-col-xs-12 mui-text-center hmx-text-md" style="background-color: #EB6100;color: white;letter-spacing: 8px;">
					<span>播放</span>
				</div>
			</div>
		</nav>

		<!--<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>-->
		<script src='js/jquery-2.1.4.min.js'></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var row = JSON.parse(window.sessionStorage.getItem("$row"));
			mui.init();
			$('#btnEnter').click(function() {
				window.sessionStorage.setItem('$row', JSON.stringify(row));
				window.location.href = 'pay.html';
			});
			$('#btnPlay').click(function() {
				window.sessionStorage.setItem('$row', JSON.stringify(row));
				window.location.href = 'player.html';
			});

			function go2Player($row) {
				window.sessionStorage.setItem('$audition', JSON.stringify($row));
				window.location.href = 'player.html?tag=试听';
			};

			$(function() {
				initUI(row);
				if(typeof(row['fileUrl']) == 'undefined') {
					getAudios(row['specialId']);
				} else {
					getAudio();
				}
			});

			function getAudios(specialId) {
				$('#audiosList').UIListView({
					//					dataUrl 'http://jwangkun.vicp.net/jywhweixin/weixin/front_index/latest',
					dataUrl: "data/front_index/audios.json",
					itemTplUrl: "tpl/detailAudiosListItem.tpl",
					queryData: {
						specialId: specialId
					},
				});
			};

			function getAudio() {

			};

			function initUI(r) {
				$('#imgUrl').attr('src', $.getContextPath() + window.config.picPathBaseUrl + r['image']);
				$('#playCount').html(r['playCount']);
				$('#specialDesc').html(r['specialDesc']);
				$('#specialName').html(r['specialName']);
				$('#subscriptionCount').html(r['subscriptionCount']);
				$('#unitPrice').html(r['unitPrice']);
				$('#upTime').html(r['upTime']);
				if(r['unitPrice'] == 0) {
					$('#btnEnter').parent().hide();
					$('#btnPlay').parent().show();
				} else {
					checkIsSubscribed(r['specialId']);
				}
			}

			function checkIsSubscribed(specialId) {
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/front_subscribed/isSubscribed",
					async: true,
					data: {
						specialId: specialId
					},
					success: function(r) {
						r = eval('(' + r + ')');
						alert(JSON.stringify(r));
						if(r.data.length > 0) {
							if(r.data[0]['mun'] > 0) {
								//已订阅
								$('#btnEnter').parent().hide();
								$('#btnPlay').parent().show();
							} else {
								$('#btnPlay').parent().hide();
								$('#btnEnter').parent().show();
								//20161029判断是否为会员且在有效期内
								checkIsVip();
							}
						} else {
							$('#btnPlay').parent().hide();
							$('#btnEnter').parent().show();
						}
					}
				});
			}
			/**
			 * 20161029判断是否为会员且在有效期内
			 */
			function checkIsVip() {
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/front_vip/deadline",
					async: true,
					success: function(r) {
						r = eval("(" + r + ")");
						if(r.data[0].status == 1) {
							//是会员且在有效期内
							$('#btnEnter').parent().hide();
							$('#btnPlay').parent().show();
						}
					}
				});
			}
		</script>
	</body>

</html>